<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>站点导航</title>

    <script src="js/data.js">
    </script>

    <style>
        #navmenu {
            position: fixed;
            left: 0;

        }

        #navmenu>a {
            /* 导航菜单a标签块级显示 */
            display: block;
        }

        article {
            position: absolute;
            left: 5%;
            right: 5%;

            text-align: center;
        }

        article a {

            padding: 5px;
        }

        body {
            background-color: antiquewhite;

        }
    </style>
</head>

<body>

    <article>
        <div id="search">
            <input type="text" id="words">
            <a id="button" target="_black"
                onclick="this.href='http://www.baidu.com/s?wd='+document.getElementById('words').value">搜索</a>

        </div>

        <div id="navdata">

        </div>

    </article>
    <aside id="navmenu">

    </aside>

</body>

<script>

    //     var menus = {
    //         "生活": {
    //             "搜索": {
    //                 "id": "ss"
    //             }, "娱乐": {
    //                 "id": "yule"
    //             }
    //         },
    //         "学习": {
    //             "理科": {
    //                 "id": "lk"
    //             }, "文科": {
    //                 "id": "wk"
    //             }
    //         },



    //     }


    // // menus={
    // // 菜单集合
    // // menu:{
    // // 第一大类
    // //     submenu{
    // // 第一大类的子类
    // // id:idnum
    // // 子类的id
    // //     }
    // // }}
    // // data=[
    // // {name:名称，url，路径，desc：简介，parentid：父id}，
    // // ]


    //     var datas = [
    //         { "name": "百度", "url": "http://www.baidu.com", "desc": "搜索引擎", "parentid": "ss" },
    //         { "name": "度", "url": "http://www.baidu.com", "desc": "搜索引擎", "parentid": "ss" },
    //         { "name": "百度", "url": "http://www.baidu.com", "desc": "搜索引擎", "parentid": "yule" },
    //         { "name": "度", "url": "http://www.baidu.com", "desc": "搜索引擎", "parentid": "lk" },
    //     ]

    var tempele = null, menu = null, submenu = null, id = null, href = null, subdiv = null, data = null;
    for (menu in menus) {
        // menu
        // 学习
        // 生活
        console.log(menus[menu]);
        tempele = document.createElement("a")
        // 侧边主菜单
        href = '#' + menus[menu][Object.keys(menus[menu])[0]]["id"];
        tempele.href = href;
        tempele.innerText = menu;
        document.getElementById("navmenu").appendChild(tempele);

        // 侧方菜单

        for (submenu in menus[menu]) {
            subdiv = document.createElement("div");
            subdiv.id = menus[menu][submenu]["id"];
            // 子菜单容器
            tempele = document.createElement("span");
            // 子菜单
            tempele.innerText = submenu;

            subdiv.appendChild(tempele);

            document.getElementById("navdata").appendChild(subdiv);

        }
        // 数据栏菜单
    }

    for (data in datas) {
        // 将数据添加到容器
        tempele = document.createElement("a");
        tempele.href = datas[data]["url"];
        tempele.innerText = datas[data]["name"];
        tempele.target = "_blank";
        tempele.title = datas[data]["desc"];

        document.getElementById(datas[data]["parentid"]).appendChild(tempele);


    }
    var textele = document.getElementById("words");
    // 回车键绑定
    textele.onkeypress = function (event) {
        if (event.which === 13) {
            document.getElementById("button").click();
        }
    }
// }

</script>
</html>